<template>
	<view class="">
		<navbar :title="$t('common.record')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		 </navbar>
		 <view class="state">
		 	<view class="unchecked" @click="state(1)" :class="{checked:sum==1}">
		 		{{ $t("pay.success")}}
		 	</view>
			<view class="unchecked" @click="state(2)" :class="{checked:sum==2}">
				{{ $t("pay.fail")}}
			</view>
			<view class="unchecked" @click="state(0)" :class="{checked:sum==0}">
				{{ $t("pay.paid")}}
			</view>
		 </view>
		 <mescroll-body ref="mescrollRef" @up="upCallback" @init="mescrollInit" @down="downCallback"
			:down="downOption" :up="upOption">
			<view>
		 <view class="gray" v-for="item in list">
		 	<view class="msg" >
		 		<view class="msg1">
		 			<view class="">
		 				{{ $t("withdraw.order")}}
		 			</view>
					<view class="count">
						{{item.order_id}}
					</view>
		 		</view>
				<view class="msg1">
					<view class="">
		 				{{ $t("withdraw.createtime")}}
		 			</view>
					<view class="count">
						{{item.createtime}}
					</view>
				</view>
				<view class="msg2">
					<view class="">
						{{ $t("pay.Topupamount")}}
					</view>
					<view class="">
						{{ $currency }}{{item.price}}
					</view>
				</view>
				<view class="line">
				</view>
				<view class="msg3" >
					<view class="success" v-show="sum==1">
						{{ $t("pay.Topupsuccess")}}
					</view>
					<view class="failure"  v-show="sum==2">
						{{ $t("pay.fail")}}
					</view>
					<view class="paid"  v-show="sum==0">
						{{ $t("pay.paid")}}
					</view>
					<!-- <view class="delete" v-show="sum==1||sum==2">
						{{ $t("pay.delete")}}
					</view> -->
					<!-- <view class="delete1" v-show="sum==0">
						<view class="continue">
							{{ $t("pay.continue")}}
						</view>
					</view> -->
				</view>
		 	</view>
		 </view>
		 </view>
		 </mescroll-body>
	</view>
</template>

<script>
	import {
		paymentlog,
	} from '@/api/money.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
	export default{
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data(){
			return{
				sum:1,
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
				list: []
			}
		},
		watch:{
			'sum' (val) {
				this.list = []
				this.mescroll.resetUpScroll()
			}
		},
		methods:{
			state(e){
				this.sum=e
				
			},
			async upCallback(page) {
				let pageNum = (page.num - 1) * page.size
				let pageSize = page.size
				// withdrawlog({
				// 	page: 1,
				// }).then(res => {
				// 	let curPageData = res.list
				// 	let curPageLength = curPageData.length
			
				// 	let totalSize = +res.count
			
				// 	if (page.num == 1) this.addressList = []
				// 	this.addressList = this.addressList.concat(curPageData)
					
			
				// }).catch(err => {
					// 	this.mescroll.endErr()
				// })
				let result = await paymentlog({
					page: page.num,
					status: this.sum
				})
				if (page.num == 1) this.list = []
				this.list = this.list.concat(result)
				let curPageLength = result.length
				this.mescroll.endSuccess(curPageLength)
			},
		}
			
				
			
		
	}
</script>
<style lang="scss">
	page{
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss" scoped>
	.state{
		width: 750rpx;
		height: 114rpx;
		background: #FFFFFF;
		display: flex;
		.unchecked{
			width: 250rpx;
			height: 114rpx;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color:#65676B;
			
			line-height: 114rpx;
			text-align: center;
		}
		.checked{
			fontsize:32rpx;
			color: #0F0F0E;
			border-bottom: 6rpx solid #C17C1C;
		}
	}
	.gray{
		overflow: hidden;
		background-color: #F6F6F6;
		.msg{
			overflow: hidden;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 30rpx;
			.msg1{
				margin: 30rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
			}
			.msg2{
				display: flex;
				justify-content: space-between;
				margin: 0 30rpx 40rpx;
				height: 28rpx;
				line-height: 28rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
			}
			.line{
				width: 690rpx;
				height: 2rpx;
				background: #ECECEC;
			}
			
			.msg3{
				display: flex;
				justify-content: space-between;
				height:80rpx;
				margin: 30rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
				.delete{
					width: 200rpx;
					height: 80rpx;
					background: $u-type-primary;
					border-radius: 10rpx;
					color:#fff;
					text-align: center;
				}
				.failure,.paid{
					color: #FC3E32;
				}
			}
		}
	}
	.delete1{
		display: flex;
		justify-content: space-between;
		.delete2{
			width: 200rpx;
			height: 80rpx;
			background: $u-type-primary;
			border-radius: 10rpx;
			color:#fff;
			text-align: center;
		}
		.continue{
				width: 200rpx;
				height: 80rpx;
				background:#0F0F0E;
				border-radius: 10rpx;
				color:$u-type-primary;
				text-align: center;
				margin-left: 30rpx;
		}
	}
	
	
	
</style>
